<template>
  <div class="ani02">
      <h2>vue关键帧动画</h2>
      <button @click="show=!show">toggle</button><br><hr>
      <transition name="kf">
          <img src="https://t7.baidu.com/it/u=2340400811,4174965252&fm=193&f=GIF" v-if="show" width="200">
      </transition>
  </div>
</template>

<script>
export default {
    name:"Animation02",
    data(){
        return {
            show:true
        }
    }
}
</script>
<!--
 如果使用vue动画执行关键帧动画，因为关键帧需要多个关键点，所以不需要再设置初始化和结束值，也就意味着（v-enter，v-enter-to，v-leave，v-leave-to）都可以不设置，直接用@keyframe代替，只写（v-enter-active和v-leave-active）即可
-->
<style>
.ani02 {
    width: 100%;
    height: 70%;
    background-color: blueviolet;
}
.kf-leave-active{
    animation: moveImg 2s linear;
}
.kf-enter-active{
    animation: moveImg 2s reverse linear;
}
@keyframes moveImg {
    0%{transform: translate(0,0);opacity: 1;}
    25%{transform: translate(200px,0);opacity: .7;}
    50%{transform: translate(200px,200px);opacity: .5;}
    75%{transform: translate(0,200px);opacity: .2;}
    100%{transform: translate(0,0);opacity: 0;}
}
</style>